<template>
    <div class="registerBody">
        <div class="registerContent">
            <el-card v-if="!isRegister" class="card" :body-style="{ padding: '0 20px' }">
                <template #header>
                    <h2>用户注册</h2>
                </template>
                <div class="registerForm">
                    <div class="back" @click="goBack">
                        <p>返回</p>
                        <svg t="1723536226845" class="icon" viewBox="0 0 1237 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="1454" width="40" height="40">
                            <path
                                d="M481.216 273.002667V0L0 477.802667l481.216 477.994666V675.84c343.68 0 584.32 109.205333 756.117333 348.181333-68.693333-341.376-274.901333-682.602667-756.117333-750.997333"
                                fill="#4AD9FD" p-id="1455"></path>
                        </svg>
                    </div>
                    <el-form v-model="registerForm">
                        <el-form-item label="姓&emsp;&emsp;名：" prop="uname">
                            <el-input type="text" v-model="registerForm.uname" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="性&emsp;&emsp;别：" prop="sex">
                            <el-radio-group v-model="registerForm.sex">
                                <el-radio border value="1">男</el-radio>
                                <el-radio border value="0">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="邮&emsp;&emsp;箱：" prop="email">
                            <el-input type="text" v-model="registerForm.email" placeholder="请输入邮箱"></el-input>
                        </el-form-item>
                        <el-form-item label="常用手机：" prop="telephone">
                            <el-input type="text" v-model="registerForm.telephone" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号：" prop="idcard">
                            <el-input type="text" v-model="registerForm.idcard" placeholder="请输入身份证号"></el-input>
                        </el-form-item>
                        <br>
                        <el-button color="#626aef" @click="toRegister">注册</el-button>
                        <br>
                        <el-button color="#5941a6" style="color:white" @click="toReset">重置</el-button>
                    </el-form>
                </div>
            </el-card>
            <el-card v-else class="card" :body-style="{ padding: '0 20px' }">
                <el-result icon="success" title="注册成功" :sub-title="`${count}秒后自动返回登陆页面`">
                    <template #extra>
                        <el-button type="primary" @click="goBack">返回</el-button>
                    </template>
                </el-result>
            </el-card>
        </div>
    </div>
</template>
<script>
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
    data() {
        return {
            count: 5,
            isRegister: false,
            registerForm: {}
        }
    },
    created() {
        this.count = 5;
    },
    methods: {
        toRegister() {
            ElMessageBox.alert(
                '请牢记您的账号和密码！<br> 您的账号是：2041036529<br>您的密码是：792364@qq.com',
                '提示',
                {
                    dangerouslyUseHTMLString: true,
                    draggable: true,
                    overflow: true,
                    showClose: false,
                    confirmButtonText: '确定',
                    type: 'warning',
                }
            )
                .then(() => {
                    this.startCountdown();
                    this.isRegister = true;
                })
        },
        goBack() {
            if (this.count != 0) {
                this.count = -1;
            }
            this.$router.push({
                path: '/login'
            })
            this.isRegister = false;
        },
        startCountdown() {
            let interval = setInterval(() => {
                if (this.count > 0) {
                    this.count--;
                } else {
                    clearInterval(interval);
                    this.goBack(); // 返回登录页面
                }
            }, 1000);
        },
    }
}
</script>
<style>
.registerBody .card .el-form .el-form-item__label {
    padding: 0;
    font-weight: bold;
    font-size: 16px;
    width: 85px !important;
}
</style>
<style lang="scss" scoped>
.registerBody {
    min-width: 100%;
    min-height: 100%;
    background-image: url("@/assets/image/loginBackground.jpg");
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;

    .registerContent {
        .card {
            background: rgba(255, 255, 255, 0.7);
            width: 450px;
            height: 588px;
            border-radius: 10px;

            h2 {
                margin: 0 auto;
            }

            .registerForm {
                width: 100%;
                margin: 0 auto;
                height: 80%;
                display: flex;
                flex-direction: column;

                .back {
                    width: 20%;
                    height: 40px;
                    display: flex;
                    flex-direction: row;
                    cursor: pointer;
                    align-items: center;

                    p {
                        width: 42px;
                        height: 42px;
                        text-align: center;
                        align-content: center;
                        font-size: 18px;

                    }
                }

                .el-form {
                    display: grid;
                    place-items: center;
                    border: 1px solid rgb(228, 231, 237);
                    width: 100%;
                    align-items: center;

                    .el-input,
                    .el-radio-group {
                        width: 240px;
                        height: 40px;
                        font-size: 16px;
                    }

                    .el-button {
                        width: 285px;
                        height: 40px;
                        font-size: 20px;
                    }
                }
            }
        }
    }
}
</style>